<template>
  <div class="outBorder">
    <div class="flex flex_vcenter topBox">
      <img src="../assets/images/icon_zxzf_sanjiaox.png" alt="">
      <span>选择付款方式</span>
    </div>
    <mu-list>
      <template v-for="(item, index) in payList">
        <mu-list-item :title="item.payTypeText" :describeText="item.payExplain" :key="index" @click="active(index, item)">
          <img :src="item.payType == '3' || item.payType == '3-1' || item.payType == '3-2' || item.payType == '6-3' ? wxIcon : item.payType == '2' || item.payType == '2-1' || item.payType == '6-2' ? alipay : ''" alt="" slot="leftAvatar"/>
          <img :src="activeMethod == index ? checked1 : checked2" class="rightIcon" alt="" slot="right"/>
        </mu-list-item>
      </template>
    </mu-list>
  </div>
</template>

<script>
  import wxIcon from '../assets/images/icon_zxzf_wx.png'
  import alipay from '../assets/alipay.png'
  import checked from '../assets/images/icon_zjzf_checkmark.png'
  import unchecked from '../assets/images/iconfont-ok-disabled.png'
  import {commonAjaxJson, RESTFUL_API} from '@/api/api'
  import { PAY_TYPE } from '@/api/const'
  export default {
    data () {
      return {
        hospitalCode: sessionStorage.getItem("hospitalCode") || "",
        PAY_TYPE,
        payList: [],
        activeMethod: 0,
        wxIcon,
        alipay,
        checked,
        unchecked,
        checked1: checked,
        checked2: unchecked
      }
    },
    props: {
      busType: {
        //1.预约挂号 2.诊间支付 3.门诊账户充值 4.住院预缴金 5.出院结算 6.图文咨询(在线问诊) 7.复诊配药 7-1药品配送（到院自提） 7-2 药品配送（送药上门） 8复诊处方支付 9云诊室支付 10病历复印 11 体检预约  12 家医签约
        type: [String],
        default: ""
      }
    },
    mounted () {
      this.getPayMethod();
    },
    computed: {
      payType (){
        if(this.payList.length > 0) {
          return this.payList[this.activeMethod].payType
        }
      }
    },
    watch: {
      payType: {
        handler (newval) {
          this.$emit('typeChange', newval)
        },
        immediate: true
      }
    },
    methods: {
      getPayMethod (){
        let param = {
          hospitalCode: this.hospitalCode,
          busType: this.busType
        }
        commonAjaxJson(`${RESTFUL_API.getPayConfig}`, param, true).then( res => {
          if(res.data.code === 200) {
            this.payList = res.data.data
          } else {
            this.$store.commit("UPDATE_TOAST", { message: res.data.message });
          }
        })
        
      },
      active (num, item) {
        this.activeMethod = num
        this.payType = item.payType
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../common/css/flex.css";
  @import "../common/css/vars";
  .outBorder{
    border-top:1px solid @color-border;
    border-bottom:1px solid @color-border;
    background-color: white;
  }
  .topBox{
    padding:10px 20px;
    border-bottom:1px solid @color-border;
    img{
      height:14px;
      width:14px;
      margin-right:10px;
    }
  }
  .rightIcon{
    width:20px;
    height:20px;
  }
</style>
